<template>
  <div class="tab-control">
    <div class="tab-item" v-for="(item,index) in titles" :key="index" :class="{active:index==currentIndex}" @click="changeTab(index)" > 
      <span :style="tabStyle">{{item}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TabControl',
  props:{
    titles: {
      type:Array,
      default(){
        return ['流行','新款','精品']
      }
    },
    tabStyle:{
      type: Array,
      default(){
        return [{color: "#FF8E97"},{fontSize:"14px"}]
      }
    }
  },
  data() {
    return {
      currentIndex: 0,
      active: true
    };
  },
  computed:{
  },
  watch:{
  },
  methods: {
    changeTab(index){
      // console.log('index:'+index,'currentIndex'+this.currentIndex)
      this.currentIndex = index;
      console.log('tabcontrol',index)
      this.$emit('tabClick',index)
    }
  },
};
</script>

<style scoped>
.tab-control {
  width: 100%;
  display: flex;
  text-align: center;
}
.tab-item {
  flex: 1;
}
.tab-item span{
  border-bottom: 2px solid #000000
}
.active {
  color: green;
}
.active span {
  border-bottom: 2px solid green
}
</style>
